import React from 'react';

class AthleteSort extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'AthleteSort';
        this.state = {
            mode: "athlete",
            tableTitle: [
                "排名","姓名","俱乐部","总分"
            ],
            athletes: [
                {
                    rank: "2",
                    img: "",
                    name: "顾晨阳",
                    club: "沈阳第一",
                    score: "20"
                },
                {
                    rank: "5",
                    img: "",
                    name: "顾晨阳",
                    club: "沈阳第一",
                    score: "15"
                }
            ]
        }
    }
    render() {
            let tableTitle = this.state.tableTitle.map(function(title, index){
                return (
                    <span key={index} className={index==0?"":"wrap-item"}>{title}</span>
                );
            })
            let athletesList = this.state.athletes.map(function( athlete, index ) {
                return (
                    <li key={index}>
                        <a >
                            <span>{athlete.rank}</span>
                            <p className="athDetail">
                                <span>
                                    <img src={athlete.img} />
                                    {athlete.name}
                                </span>
                                <span> {athlete.club} </span>
                                <span> <em>{athlete.score}</em>{this.state.mode=="club"?"分":"个"}</span>
                            </p>
                        </a>
                    </li>
                )
            }.bind(this))
            return (
                <section className={this.state.mode} >
                    <p className="tableTitle">
                        {tableTitle}
                    </p>
                    <ul>
                        {athletesList}
                    </ul>
                </section>
            );
        }
}

export default AthleteSort;
